﻿<template>
  <el-dialog v-model="isShowDialog" :width="1000" :height="1000" draggable="" fullscreen>
  <div class="student-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
      <el-form :model="queryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="级">
              <el-select clearable="" filterable="" v-model="queryParams.ji" placeholder="请选择级">
                <el-option v-for="(item,index) in  jiaoxueBanJiDropdownList" :key="index" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="班级">
              <el-select clearable="" filterable="" v-model="queryParams.banjiId" placeholder="请选择班级">
                <el-option v-for="(item,index) in  banjiBanjiIdDropdownList" :key="index" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="教学班">
              <el-select clearable="" filterable="" v-model="queryParams.jiaoxueBanId" placeholder="请选择教学班">
                <el-option v-for="(item,index) in  JiaoxueBanBanjiIdDropdownList" :key="index" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="queryParams.searchKey" clearable="" placeholder="请输入模糊查询关键字"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="序号">
              <el-input v-model="queryParams.xuhao" clearable="" placeholder="请输入序号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="学号">
              <el-input v-model="queryParams.xh" clearable="" placeholder="请输入学号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="姓名">
              <el-input v-model="queryParams.name" clearable="" placeholder="请输入姓名"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="性别">
              <el-input v-model="queryParams.sex" clearable="" placeholder="请输入性别"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="身份证号">
              <el-input v-model="queryParams.iDCardNum" clearable="" placeholder="请输入身份证号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="全国学籍号">
              <el-input v-model="queryParams.nationalNum" clearable="" placeholder="请输入全国学籍号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="学籍辅号">
              <el-input v-model="queryParams.assistNum" clearable="" placeholder="请输入学籍辅号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="手机">
              <el-input v-model="queryParams.tel" clearable="" placeholder="请输入手机"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="备注0">
              <el-input v-model="queryParams.beizhu0" clearable="" placeholder="请输入备注0"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="备注1">
              <el-input v-model="queryParams.beizhu1" clearable="" placeholder="请输入备注1"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="备注2">
              <el-input v-model="queryParams.beizhu2" clearable="" placeholder="请输入备注2"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" class="mb10">
            <el-form-item>
              <el-button-group>
                <el-button type="primary"  icon="ele-Search" @click="handleQuery" v-auth="'student:page'"> 查询 </el-button>
                <el-button icon="ele-Refresh" @click="() => queryParams = {}"> 重置 </el-button>
                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI"> 高级 </el-button>
                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI"> 隐藏 </el-button>
                <el-button type="primary"  icon="ele-Search" @click="importFromStudentHandle" v-auth="'kaosheng:importFromStudent'"> 导入 </el-button>
              </el-button-group>
            </el-form-item>
            
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 8px">
      <el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
				tooltip-effect="light"
				row-key="id"
        @selection-change="handleSelectionChange"
				border="">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <!-- <el-table-column prop="kaoHao" label="序号" width="55" show-overflow-tooltip="" /> -->
        <el-table-column prop="xh" label="学号" width="80" show-overflow-tooltip="" />
        <el-table-column prop="name" label="姓名" width="80" show-overflow-tooltip="" />
        <el-table-column prop="sex" label="性别" width="55" show-overflow-tooltip="" />
        <el-table-column prop="idCardNum" label="身份证号" width="150" show-overflow-tooltip="" />
        <el-table-column prop="nationalNum" label="全国学籍号" width="150" show-overflow-tooltip="" />
        <el-table-column prop="assistNum" label="学籍辅号" width="120" show-overflow-tooltip="" />
        <el-table-column prop="sex" label="性别" width="60" show-overflow-tooltip="" />
        <el-table-column prop="beAtSchool" label="在校" width="55" show-overflow-tooltip="">
          <template #default="scope">
            <el-tag v-if="scope.row.beAtSchool"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
            
          </template>
          
        </el-table-column>
        <el-table-column prop="beAtBook" label="在籍" width="55" show-overflow-tooltip="">
          <template #default="scope">
            <el-tag v-if="scope.row.beAtBook"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
            
          </template>
          
        </el-table-column>
        <el-table-column prop="tel" label="手机" width="100" show-overflow-tooltip="" />
        <el-table-column prop="banjiId" label="班级" width="80" show-overflow-tooltip="">
          <template #default="scope">
            <span>{{scope.row.banjiIdName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="jiaoxueBanId" label="教学班" width="80" show-overflow-tooltip="">
          <template #default="scope">
            <span>{{scope.row.jiaoxueBanIdName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="beizhu0" label="备注0" width="140" show-overflow-tooltip="" />
        <el-table-column prop="beizhu1" label="备注1" width="140" show-overflow-tooltip="" />
        <el-table-column prop="beizhu2" label="备注2" width="140" show-overflow-tooltip="" />
      </el-table>
      <el-pagination
				v-model:currentPage="tableParams.page"
				v-model:page-size="tableParams.pageSize"
				:total="tableParams.total"
				:page-sizes="[10, 20, 50, 100, 200, 500]"
				small=""
				background=""
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
	/>
    </el-card>
  </div>
</el-dialog>
</template>

<script lang="ts" setup="" name="student">
  import { ref,reactive } from "vue";
  import { ElMessageBox, ElMessage,UploadInstance } from "element-plus";
  import { auth } from '/@/utils/authFunction';
  import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
  import { formatDate } from '/@/utils/formatTime';

  import { pageStudent,pageJiaoxueBanStudent } from '/@/api/main/student';
  import { getBanjiBanjiIdDropdown,getJiaoxueBanBanjiIdDropdown} from '/@/api/main/student';
  import { getBanjiJiDropdown } from '/@/api/main/banji';
  import { getJiaoxueBanJiDropdown,pageJiaoxueBan} from '/@/api/main/jiaoxueBan';
  
  import { importFromStudent } from '/@/api/main/kaosheng';

  import { getAPI } from '/@/utils/axios-utils';

  const isShowDialog = ref(false);

  const kaoshiId = ref(0);

  const showAdvanceQueryUI = ref(false);
  const printDialogRef = ref();
  const editDialogRef = ref();
  const loading = ref(false);
  const tableData = ref<any>([]);
  const importData = ref<any>([]);
  const queryParams = ref<any>({});
  const tableParams = ref({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const emit = defineEmits(["reloadTable"]);

  // 改变高级查询的控件显示状态
  const changeAdvanceQueryUI = () => {
    showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
  }
  

  // 查询操作
  const handleQuery = async () => {
    loading.value = true;
    var res = await pageJiaoxueBanStudent(Object.assign(queryParams.value, tableParams.value));
    tableData.value = res.data.result?.items ?? [];
    tableParams.value.total = res.data.result?.total;
    loading.value = false;
  };

  // 改变页面容量
  const handleSizeChange = (val: number) => {
    tableParams.value.pageSize = val;
    handleQuery();
  };

  // 改变页码序号
  const handleCurrentChange = (val: number) => {
    tableParams.value.page = val;
    handleQuery();
  };

  const banjiBanjiIdDropdownList = ref<any>([]); 
  const getBanjiBanjiIdDropdownList = async () => {
    let list = await getBanjiBanjiIdDropdown();
    banjiBanjiIdDropdownList.value = list.data.result ?? [];
  };

  const JiaoxueBanBanjiIdDropdownList = ref<any>([]); 
  const getJiaoxueBanBanjiIdDropdownList = async () => {
    let list = await getJiaoxueBanBanjiIdDropdown();
    JiaoxueBanBanjiIdDropdownList.value = list.data.result ?? [];
  };

  const banjiJiDropdownList = ref<any>([]); 
  const getBanjiJiDropdownList = async () => {
    let list = await getBanjiJiDropdown();
    banjiJiDropdownList.value = list.data.result ?? [];
  };

  const jiaoxueBanJiDropdownList = ref<any>([]); 
  const getJiaoxueBanJiDropdownList = async () => {
    let list = await getJiaoxueBanJiDropdown();
    jiaoxueBanJiDropdownList.value = list.data.result ?? [];
  };
  

  const openDialog = async (row: any) => {
    kaoshiId.value = row.kaoshiId;
    handleQuery();
		isShowDialog.value = true;
	};

  const checkedIds = ref<any>([])
  const handleSelectionChange = (selection) => {
    //multipleSelection.value = val
    checkedIds.value = selection.map((item) => item.id)
    console.log(checkedIds.value);
  }

  // 查询操作
  const importFromStudentHandle = async () => {
    //loading.value = true;
    console.log('kaoshiId:' + kaoshiId.value);
    var res = await importFromStudent({kaoshiId:kaoshiId.value,studentIds:checkedIds.value});
    //loading.value = false;
    //isShowDialog.value = false;
    closeDialog();
  };
  
  	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};

  getJiaoxueBanJiDropdownList();
  getBanjiBanjiIdDropdownList();
  getJiaoxueBanBanjiIdDropdownList();
  //getBanjiJiDropdownList();

  handleQuery();

  defineExpose({ openDialog });
</script>
<style scoped>
:deep(.el-ipnut),
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>

